
<div id="new-license" v-cloak>
  <div style="max-width: 560px;" class="container-fluid pb-5 px-lg-0 px-3" v-if="!showSuccessMessage">
    <div purpose="page-heading">
      <h1>Welcome to Fleet Premium</h1>
      <p class="pb-2">We just need a few details in order to get started.</p>
    </div>
    <div purpose="customer-portal-form" class="card card-body">
      <ajax-form action="createQuote" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="quoteFormRules" @submitted="submittedQuoteForm($event)">
        <div class="d-flex flex-column flex-sm-row">
          <div class="form-group flex-grow-1 col-12 col-sm-6 order-first px-0 mb-3 mb-sm-5">
            <label for="numberOfHosts">Total number of hosts</label>
            <input class="form-control" min="1" purpose="quote-input" id="numberOfHosts" type="number" :class="[formErrors.numberOfHosts ? 'is-invalid' : formErrors.numberOfHosts < 1 ]" focus-first v-model.trim="formData.numberOfHosts" v-if="!numberOfHostsQuoted">
            <div class="invalid-feedback" v-if="formErrors.numberOfHosts">Please enter a number of hosts</div>
            <span purpose="quote-input" style="position: relative; cursor: text; padding: 6px 16px 8px 16px;" class="form-control" @click="clickResetForm()" v-if="numberOfHostsQuoted">{{formData.numberOfHosts}}<span style="position: absolute; cursor: pointer; bottom: 14px; right: 16px;" class="text-muted fa fa-times-circle pl-2"></span></span>
          </div>

          <div style="color: #515774;" class="order-last text-left text-sm-right col-12 col-sm-6 pr-0 pl-sm-4 pl-0 pt-sm-4" v-if="showQuotedPrice && numberOfHostsQuoted < 700">
            <p class="small">
              <strong class="pr-1" style="font-size: 18px; color: #192147">$7.00</strong>/ host / month<br>(Billed annually)
            </p>
          </div>

        </div>
        <cloud-error purpose="cloud-error" v-if="cloudError && !showBillingForm"></cloud-error>
        <div class="mt-2 pt-3 border-top d-flex flex-column" v-if="showQuotedPrice && formData.numberOfHosts && numberOfHostsQuoted">
          <div class="pb-2">
            <strong>Order summary</strong>
          </div>
          <div class="d-flex flex-row justify-content-between">
            <p class="">Fleet Premium (self-hosted<span v-if="numberOfHostsQuoted > 699" > or managed cloud</span>)</p>
          <div class="ml-auto text-right" v-if="numberOfHostsQuoted < 700">
            <strong>${{(!showQuotedPrice || _.isNaN(formData.numberOfHosts * 7.00 * 12)) ? quotedPrice : formData.numberOfHosts * 7.00 * 12}}.00 <br purpose="order-form-line-break">/year</strong>
          </div>
          </div>
        </div>
        <div :class="[showBillingForm ? 'pt-2' : '' ]" v-if="!showBillingForm">
          <ajax-button purpose="submit-button" spinner="true" type="submit" :syncing="syncing" class="btn btn-block btn-lg btn-primary" v-if="!numberOfHostsQuoted">Continue</ajax-button>
          <ajax-button spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-primary" @click="clickScheduleDemo" v-if="showQuotedPrice && numberOfHostsQuoted > 699">Talk to us</ajax-button>
          <ajax-button spinner="true" purpose="submit-button" :syncing="syncing" class="btn btn-block btn-lg btn-primary" v-if="showQuotedPrice && numberOfHostsQuoted < 700">Continue</ajax-button>
        </div>
      </ajax-form>
    </div>
    <div class="card card-body mt-3" v-if="showBillingForm">
      <h3 class="pb-3">Billing information</h3>
      <ajax-form :handle-submitting="handleSubmittingCheckoutForm" :syncing.sync="syncing" :cloud-error.sync="cloudError" :form-errors.sync="formErrors" :form-data="formData" :form-rules="checkoutFormRules" v-if="!cloudError || cloudError === 'couldNotSaveBillingInfo' || cloudError === 'cardVerificationRequired'">
        <div class="form-group" purpose="self-hosted-checkbox">
          <input type="checkbox" id="self-hosted-acknowledgment"  v-model.trim="formData.selfHostedAcknowledgment" @input="clickClearOneFormError('selfHostedAcknowledgment')">
          <label purpose="self-hosted-note" :class="[formErrors.selfHostedAcknowledgment ? 'is-invalid' : '']"  for="self-hosted-acknowledgment">I understand that managed cloud hosting is not available for less than 700 hosts. I will host Fleet myself.</label>
          <div class="invalid-feedback" v-if="formErrors.selfHostedAcknowledgment"><p>Please confirm that you will be hosting Fleet yourself.</p></div>

        </div>
        <cloud-error purpose="cloud-error" v-if="cloudError === 'couldNotSaveBillingInfo'">
          <p>The billing card provided could not be used. Please use another card or <a href="/contact" target="_blank">contact support</a>.</p>
        </cloud-error>
        <cloud-error purpose="cloud-error" v-else-if="cloudError === 'cardVerificationRequired'">
          <p>The billing card provided could not be used without additional verification. Please use another card or <a href="/contact" target="_blank">contact support</a> to complete your order.</p>
        </cloud-error>
        <ajax-button purpose="submit-button" spinner="true" :syncing="syncing" class="btn btn-block btn-lg btn-primary mt-4">Checkout</ajax-button>
      </ajax-form>
      <cloud-error purpose="cloud-error" v-else-if="cloudError">
        <p class="mb-3 text-bold text-strong">An error has occurred while processing your request.</p>
        <p class="mb-2">We're sorry that this happened. A human has been informed of this error and is looking into it.</p>
        <p>Feel free to <a href="/customers/new-license">reload the page</a> and try again.</p>
      </cloud-error>
    </div>
  </div>

  <div style="max-width: 650px;" class="container-fluid pb-5 text-center" v-else>
    <h1>Thank you, your order is complete.</h1>
    <p class="mb-4 font-weight-bold">Welcome to your admin dashboard.</p>
    <p>From here you can access your license key, change your details and update your payment method.</p>
    <ajax-button style="height: 40px; font-size: 14px; line-height: 24px; width: 200px" type="submit" purpose="submit-button" :syncing="syncing" spinner="true" class="btn btn-block btn-lg btn-primary mx-auto" @click="clickGoToDashboard()">Contine to dashboard</ajax-button>
  </div>
</div>
<%- /* Expose server-rendered data as window.SAILS_LOCALS :: */ exposeLocalsToBrowser() %>
